<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{../bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../css/main.css}">
    <script th:src="@{|/jquery/jquery.md5.js|}"></script>
    <style>

        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        table tbody td:nth-child(even) {
            color: #cc0000;
        }
        .addwork-text{
            width: 150px;
            display:inline;
        }
        .addwork-text1{
            width: 250px;
            display:inline;
        }
    </style>



</head>

<body>

<div th:replace="../templates/nav"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="../templates/menu"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i>加班申请</h3>
                </div>

                <div class="table-responsive">
                    <div class="form-group">
                        <form id="workSearchForm">
                        <label >审批状态</label>
                        <select name="wstate" id="wstateSelect" class="form-control addwork-text" placeholder="请选择审核状态">
                            <option  value="">请选择审核状态</option>
                            <option value="未审核">未审核</option>
                            <option value="已审核">已审核</option>
                        </select>
                            <label >申请时间范围</label>

                            <input name="bnowtime1" id="bnowtime1" type="date">&nbsp;-
                            <input name="enowtime1" id="enowtime1" type="date">
                            <input name="bnowtime" id="bnowtime" type="hidden">
                            <input name="enowtime" id="enowtime" type="hidden">
                            <button type="button" class="btn btn-warning" id="btnReset"><i class="glyphicon glyphicon-erase"></i> 重置</button>

                            <button type="button" class="btn btn-warning" id="btnSearch"><i class="glyphicon glyphicon-search"></i> 搜索</button>
                        </form>
                    </div>
                    <input type="hidden" name="uidwl" id="uidWorkList" th:value="${user.uid}">
                    <div class="table-responsive">
                    <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th >NO.</th>
                                <th >申请人</th>
                                <th >加班地区</th>
                                <th >开始时间</th>
                                <th >结束时间</th>
                                <th >时长</th>
                                <th>申请时间</th>
                                <th>申请原因</th>
                                <th>审批情况</th>
                                <th>操作</th>
                            </tr>
                            <tbody id="tbody"></tbody>
                            </thead>
                            <tfoot>
                            <tr >
                                <td colspan="10" align="center">
                                    <ul class="pagination" id="byPage">

                                    </ul>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                    <div style="text-align: left;">
                        <button id="btnform" onclick="addWork()" type="button" class="btn btn-w-m btn-danger">申请加班</button>
                    </div>
                </div>
        </div>
    </div>
</div>
</div>
<script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{|/jquery/jquery.md5.js|}"></script>
<script th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{../script/docs.min.js}"></script>
<script th:src="@{../layer/layer.js}"></script>

<form id="AddWorkForm">
    <div class="modal fade" id="AddModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="AddModalLabei">加班申请</h4>
                </div>
                <input type="hidden" name="wno" id="wnoAdd">
                <div class="modal-body">
                <div class="form-group">
                        <label for="addressAdd" >所在校区:</label>
                    <input id="addressAdd" name="address" th:value="${user.area}" disabled class="form-control addwork-text" />
                    <input type="hidden" name="address" th:value="${user.area}"  class="form-control addwork-text" />
                    </div>
                    <div class="form-group" >
                        <label for="nameAdd" >&nbsp;申&nbsp;请&nbsp;人:</label>
                            <input id="nameAdd" name="name" th:value="${user.uname}" disabled class="form-control addwork-text" />
                        <input type="hidden" name="name" th:value="${user.uname}"  class="form-control addwork-text" />

                    </div>
                    <input type="hidden" name="uid" th:value="${user.uid}">
                    <input type="hidden" name="wstate" id="wstateAdd" value="未审核">
                    <div class="form-group">
                        <label for="dateSub" >&nbsp;请&nbsp;选&nbsp;择&nbsp;日&nbsp;期&nbsp;:&nbsp;</label>
                        <input id="dateSub" name="dateSub" type="date"  class="form-control addwork-text1"
                        />
                    </div>
                    <div class="form-group">
                        <label for="btimeAdd" >请选择开始时间:</label>
                        <input id="btimeAdd" name="btime" type="hidden"  class="form-control addwork-text1"
                        />
                        <input id="btimeSub" name="btimeSub" type="time"  class="form-control addwork-text1"
                               />
                    </div>
                    <div class="form-group">
                        <label for="etimeAdd" >请选择结束时间:</label>
                        <input id="etimeAdd" name="etime" type="hidden"  class="form-control addwork-text1"
                        />
                        <input id="etimeSub" name="etimeSub"  type="time" class="form-control addwork-text1"
                               />
                    </div>
                    <div class="form-group">
                        <input id="timeAdd" name="time" type="hidden"  class="form-control addwork-text1"
                        />
                    </div>

                    <div class="form-group">
                    <label for="reasonAdd" > 申请理由:</label>
                    <textarea cols="50" rows="5" name="reason" id="reasonAdd" placeholder="请填写原因"></textarea>
                    </div>
                </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="AddBtn" >添加</button>
            </div>
        </div>
    </div>
    </div>
</form>
<form id="UpdateWorkForm">
    <div class="modal fade" id="UpdateModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="UpdateModalLabei">加班申请</h4>
                </div>
                <input type="hidden" name="wno" id="wnoUpdate">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="addressAdd" >所在校区:</label>
                        <input id="addressUpdate" name="address" th:value="${user.area}" disabled class="form-control addwork-text" />
                        <input type="hidden" name="address" th:value="${user.area}"  class="form-control addwork-text" />
                    </div>
                    <div class="form-group" >
                        <label for="nameAdd" >&nbsp;申&nbsp;请&nbsp;人:</label>
                        <input id="nameUpdate" name="name" th:value="${user.uname}" disabled class="form-control addwork-text" />
                        <input type="hidden" name="name" th:value="${user.uname}"  class="form-control addwork-text" />

                    </div>
                    <input type="hidden" name="uid" th:value="${user.uid}">
                    <input type="hidden" name="wstate" id="wstateUpdate" value="未审核">
                    <div class="form-group">
                        <label for="dateSubUpdate" >&nbsp;请&nbsp;选&nbsp;择&nbsp;日&nbsp;期&nbsp;:&nbsp;</label>
                        <input id="dateSubUpdate" name="dateSubUpdate" type="date"  class="form-control addwork-text1"
                        />
                    </div>
                    <div class="form-group">
                        <label for="btimeUpdate" >请选择开始时间:</label>
                        <input id="btimeUpdate" name="btime" type="hidden"  class="form-control addwork-text1"
                        />
                        <input id="btimeSubUpdate" name="btimeSubUpdate" type="time"  class="form-control addwork-text1"
                        />
                    </div>
                    <div class="form-group">
                        <label for="etimeUpdate" >请选择结束时间:</label>
                        <input id="etimeUpdate" name="etime" type="hidden"  class="form-control addwork-text1"
                        />
                        <input id="etimeSubUpdate" name="etimeSubUpdate"  type="time" class="form-control addwork-text1"
                        />
                    </div>
                    <div class="form-group">
                        <input id="timeUpdate" name="time" type="hidden"  class="form-control addwork-text1"
                        />
                    </div>
                    <div class="form-group">
                        <label for="reasonUpdate" > 申请理由:</label>
                        <textarea cols="50" rows="5" name="reason" id="reasonUpdate" placeholder="请填写原因"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="UpdateBtn" >修改</button>
                </div>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        showList(1);
    });
    /*
        *
        * 展示当前用户的所有请假信息
        * */
    function showList(currentPage) {
        var bnowtimeStr=$("#bnowtime1").val();

        var enowtimeStr=$("#enowtime1").val();
        if(bnowtimeStr!=null&&bnowtimeStr!=""&&enowtimeStr!=null&&enowtimeStr!=""){

            var f= bnowtimeStr>enowtimeStr
            if(f){
                layer.msg("请选择正确的时间区间", {time: 2000, icon: 5}, function () {

                })

                return;
            }
        }

        if(bnowtimeStr!=null&&bnowtimeStr!=""){$("#bnowtime").val(bnowtimeStr+" "+"00:00")}
        if(enowtimeStr!=null&&enowtimeStr!=""){$("#enowtime").val(enowtimeStr+" "+"23:59")}


        $.ajax({
            url: "/EduManage/worklistByUid",
            type: "post",
            data: {
                "currentPage": currentPage,
               "wstate":$("#wstateSelect").val(),
                "bnowtime":$("#bnowtime").val(),
                "enowtime":$("#enowtime").val()
            },
            success: function (data) {
                if (data.result) {
                    var str = "";
                    $.each(data.workList, function (index, work) {
                        str += "<tr>";
                        str += "<td>" + (index + 1) + "</td>";
                        str += "<td>" + work.name + "</td>";
                        str += "<td>" + work.address + "</td>";
                        str += "<td>" + work.btime + "</td>";
                        str += "<td>" + work.etime + "</td>";
                        str += "<td>" + work.time + "</td>";
                        str += "<td>" + work.nowtime + "</td>";
                        str += "<td>" + work.reason + "</td>";
                        str += "<td>" + work.wstate + "</td>";
                        str += "<td>"
                        str += '<button type="button" title="删除" class="btn btn-danger btn-xs" '+ (work.wstate=="已审核"?'disabled':'')+'  onclick="deleteWorkByWno(' + work.wno+ ')"><i class=" glyphicon glyphicon-remove"></i></button>';
                        str += '<button type="button" title="修改" class="btn btn-info btn-xs" '+ (work.wstate=="已审核"?'disabled':'')+'    onclick="updateWorkByWno(' + work.wno+ ')"><i class=" glyphicon glyphicon-pencil"></i></button>';

                        str +="</td>";
                        str += "</tr>";

                    });
                    $("#tbody").html(str);
                    var pageStr = "";
                    pageStr += '<li class="' + (data.pageBean.currentPage == 1 ? 'disabled' : '') + '"><a href="#" onclick="showList(' + (1) + ')">首页</a></li>';

                    pageStr += '<li class="' + (data.pageBean.currentPage == 1 ? 'disabled' : '') + '"><a href="#" onclick="showList(' + (data.pageBean.currentPage - 1) + ')">上一页</a></li>';
                    for (var i = 1; i <= data.pageBean.countPage; i++) {
                        pageStr += '<li class="' + (data.pageBean.currentPage == i ? 'active' : '') + '"><a href="#" onclick="showList(' + i + ')">' + i + '<span class="sr-only">(current)</span></a></li>';
                    }
                    pageStr += '<li class="' + (data.pageBean.currentPage == data.pageBean.countPage? 'disabled' : '') + '"><a href="#" onclick="showList(' + (data.pageBean.currentPage==data.pageBean.countPage?data.pageBean.currentPage:data.pageBean.currentPage + 1) + ')">下一页</a></li>';
                    pageStr += '<li class="' + (data.pageBean.currentPage == data.pageBean.countPage? 'disabled' : '') + '"><a href="#" onclick="showList(' + (data.pageBean.countPage) + ')">末页</a></li>';

                    $("#byPage").html(pageStr);
                }
            }
        });
    }
    /*
    *
    * 删除
    * */
    function  deleteWorkByWno(wno){
        layer.confirm('确定删除吗？', {
            btn: ['确定','取消']     //按钮
        }, function(){           //点击确定访问后台
            // 这里写自己的ajax代码
            $.ajax({
                url:"/EduManage/deleteWorkDo",
                type:"post",
                data:{"wno":wno},
                success:function (data){
                    if (data.result == true) {
                        layer.msg("已删除", {time: 1000, icon: 4}, function () {
                            showList(1)
                        });
                    } else {
                        layer.msg("删除失败", {time: 2000, icon: 5}, function () {

                        });
                    }
                }
            })
            //在后台返回结果为失败的函数里面写上下面代码
        }, function(){   	//点击取消则中断操作
            layer.msg('已取消', {
                time: 1000, //2s后自动关闭
            });
        });

    }
    /*
        *
        * 点击修改按钮，得到需要修改的数据
        * */
    function updateWorkByWno(wno){

        $("#UpdateModal").modal("show")
        $("#wnoUpdate").val(wno);
        $.ajax({
            url:"/EduManage/toUpdateWorkDo",
            type:"post",
            data:{"wno":wno},
            success:function (data){

                if (data.result == true) {


                    var workStr= data.work
                    var reasonStr=workStr.reason

                    var btimeStr= workStr.btime;
                    var dateStr=btimeStr.substring(0,10);
                    var btimeStrB=btimeStr.substring(11);

                    var etimeStr= workStr.etime;
                    var etimeStrE=etimeStr.substring(11);

                    $("#dateSubUpdate").val(dateStr)
                    $("#btimeSubUpdate").val(btimeStrB)
                    $("#etimeSubUpdate").val(etimeStrE)
                    $("#btimeUpdate").val(dateStr+" "+btimeStrB)
                    $("#etimeUpdate").val(dateStr+" "+etimeStrE)
                    $("#reasonUpdate").val(reasonStr)
                } else {
                    layer.msg("显示数据失败", {time: 2000, icon: 5}, function () {

                    });
                }
            }
        })
    }
    /*
        *
        * 模态框里的修改按钮，开始修改数据
        * */
    $("#UpdateBtn").click(function (){
        var dateSubStr=$("#dateSubUpdate").val()
        if(dateSubStr==null||dateSubStr==""){
            layer.msg("日期不能为空", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }
        var todayStr=new Date();
        var yearStr=todayStr.getFullYear();
        var monthStr=todayStr.getMonth()+1
        var dateStr=todayStr.getDate();
        todayStr=yearStr+"-"+monthStr+"-"+dateStr;
        var f=todayStr>dateSubStr;
        if(f){ layer.msg("日期不能在今天之前", {time: 1000, icon: 5, shift: 6}, function () {
        });
            return;}
        var btimeSubStr=$("#btimeSubUpdate").val();
        var bh=btimeSubStr.substring(0,btimeSubStr.indexOf(":"));
        var bm=btimeSubStr.substring(btimeSubStr.indexOf(":")+1);

        if(btimeSubStr==null||btimeSubStr==""){
            layer.msg("开始时间不能为空", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }
        var etimeSubStr=$("#etimeSubUpdate").val()
        var eh=etimeSubStr.substring(0,etimeSubStr.indexOf(":"))
        var em=etimeSubStr.substring(etimeSubStr.indexOf(":")+1)

        if(etimeSubStr==null||etimeSubStr==""){
            layer.msg("结束时间不能为空", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }
        var f=btimeSubStr>etimeSubStr;
        if(f){
            layer.msg("开始时间不能在结束时间之后", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }
        var h=eh-bh;

        var m=em-bm;

        if(m>=0&&m>=30){h=h+1}
        if(m>=0&&m<30){h=h}
        if(m<0&&m*(-1)>30){h=h-1}
        if(m<0&&m*(-1)<=30){h=h+1}

        $("#timeUpdate").val(h);
/*
拼接Date 和Time 进行form 传值
 */
        $("#btimeUpdate").val(dateSubStr+" "+btimeSubStr)
        $("#etimeUpdate").val(dateSubStr+" "+etimeSubStr)
        $.ajax({
            url:"/EduManage/updateWorkDo",
            type:"post",
            data:$("#UpdateWorkForm").serialize(),
            success:function (data){
                if (data.result == true) {
                    layer.msg("修改成功", {time: 1000, icon: 4}, function () {
                        $("#UpdateModal").modal("hide");
                        showList(1)
                    });
                } else {
                    layer.msg("修改失败", {time: 2000, icon: 5}, function () {

                    });
                }
            }
        })
    })

/*
*
* 调用加班申请方法
*
*
* */
    function addWork(){
        /*
        默认时间为今天
         */
        var date=new Date();
        var yearStr=date.getFullYear();
       var monthStr=date.getMonth()+1;
        var dateStr=date.getDate();
        $("#dateSub").val(yearStr+"-"+monthStr+"-"+dateStr);
       $("#AddModal").modal("show");

   }

   /*

   添加加班申请
    */
    $("#AddBtn").click(function (){
        var dateSubStr=$("#dateSub").val()
        if(dateSubStr==null||dateSubStr==""){
            layer.msg("日期不能为空", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }
        var todayStr=new Date();
        var yearStr=todayStr.getFullYear();
        var monthStr=todayStr.getMonth()+1;
        var dateStr=todayStr.getDate();
        todayStr=yearStr+"-"+monthStr+"-"+dateStr;
        var f=todayStr>dateSubStr;
        if(f){ layer.msg("日期不能在今天之前", {time: 1000, icon: 5, shift: 6}, function () {
        });
            return;}
        var btimeSubStr=$("#btimeSub").val()
        var bh=btimeSubStr.substring(0,btimeSubStr.indexOf(":"))
        var bm=btimeSubStr.substring(btimeSubStr.indexOf(":")+1)
        if(btimeSubStr==null||btimeSubStr==""){
            layer.msg("开始时间不能为空", {time: 1000, icon: 5, shift: 6}, function () {

            });
            return;
        }
        var etimeSubStr=$("#etimeSub").val()
        var eh=etimeSubStr.substring(0,etimeSubStr.indexOf(":"))
        var em=etimeSubStr.substring(etimeSubStr.indexOf(":")+1)
        if(etimeSubStr==null||etimeSubStr==""){
            layer.msg("结束时间不能为空", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }
        var f=btimeSubStr>etimeSubStr;
        if(f){
            layer.msg("开始时间不能在结束时间之后", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }
        var h=eh-bh;
        var m=em-bm;
        if(m>=0&&m>=30){h=h+1}
        if(m>=0&&m<30){h=h}
        if(m<0&&m*(-1)>30){h=h-1}
        if(m<0&&m*(-1)<=30){h=h+1}
        $("#timeAdd").val(h);
      var reasonStr=  $("#reasonAdd").val()
        if(reasonStr==null||reasonStr==""){
            layer.msg("加班原因不能为空", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }

        $("#btimeAdd").val(dateSubStr+" "+btimeSubStr)
        var btimeStr=$("#btimeAdd").val();

        $("#etimeAdd").val(dateSubStr+" "+etimeSubStr)
        var etimeStr=$("#etimeAdd").val();

        $.ajax({
            url:"/EduManage/workSaveDo",
            type:"post",
            data:$("#AddWorkForm").serialize(),
            success:function (data){
                if (data.result == true) {
                    layer.msg("已申请", {time: 1000, icon: 6, shift: 5}, function () {
                        $("#AddModal").modal("hide");
                        $("#AddWorkForm")[0].reset();
                        showList(1)
                    });
                } else {
                    layer.msg("申请失败", {time: 2000, icon: 5}, function () {

                    });
                }
            }
        })
    })
    $("#btnSearch").click(
        function (){
            showList(1)
        })
    $("#btnReset").click(

        function (){
            $("#workSearchForm")[0].reset()
            $("#bnowtime").val("")
            $("#enowtime").val("")
                showList(1)

        })

</script>
</body>
</html>
